<template>
    <u-overlay :show="show">
        <view class="share ph-32 pt-32 pb-40">
            <view class="ph-32 pt-32 pb-40">
                <image :src="detail.picUrl" class="w-f h-686" mode="widthFix"></image>
                <view class="mt-28 fs-36 fw-600 text-color4">{{ detail.name }}</view>
                <view class="mt-8">
                    <text class="fs-36 text-color8">¥</text>
                    <text class="fs-48 fw-600 text-color8">{{ detail.bargainMinPrice }}</text>
                    <text class="fs-24 text-color3 old-price">原价 ¥{{ detail.originalPrice }}</text>
                </view>
                <view class="f mt-48" style="justify-content: space-around;">
                    <button type="default" open-type="share">
                        <view class="f fd-c ai-c">
                            <image src="http://cwht.ricecs.cn/app/shop/wx.png" class="w-96 h-96 mb-16"></image>
                            <view class="fs-24 text-color3 mt-16 fw-400">微信</view>
                        </view>
                    </button>
                   <!-- <view class="box f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/pyq.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">朋友圈</view>
                    </view> -->
<!--                    <view class="box f fd-c ai-c">-->
<!--                        <image src="http://cwht.ricecs.cn/app/shop/link.png" class="w-96 h-96 mb-16"></image>-->
<!--                        <view class="fs-24 text-color3">复制链接</view>-->
<!--                    </view>-->
                    <view class="box f fd-c ai-c" @click="generatePost">
                        <image src="http://cwht.ricecs.cn/app/shop/post.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">生成海报</view>
                    </view>
<!--                    <view class="box f fd-c ai-c">-->
<!--                        <image src="http://cwht.ricecs.cn/app/shop/wb.png" class="w-96 h-96 mb-16"></image>-->
<!--                        <view class="fs-24 text-color3">微博</view>-->
<!--                    </view>-->
                </view>
            </view>
            <view class="cancel w-f h-98 f ai-c jc-c fs-32 fw-600 text-color4" @click="show = false">取消</view>
        </view>
    </u-overlay>
    <u-overlay :show="showPost">
        <view class="w-f f ai-c jc-c post fd-c" v-if="showPost">
            <Poster
                @success="posterSuccess"
                :imgSrc="goods.itempic"
                :QrSrc="erweimapath"
                :Title="goods.itemtitle"
                :PriceTxt="goods.itemendprice"
                :OriginalTxt="goods.itemprice"
                :LineType="false"
                :Width="450"
            />
            <view class="w-f h-300"></view>
        </view>

        <view class="share">
            <view class="ph-32 pt-32 pb-40">
                <view class="f mt-48" style="justify-content: space-around;">
                    <view class="box2 f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/wx.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">微信</view>
                    </view>
                   <!-- <view class="box2 f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/pyq.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">朋友圈</view>
                    </view>
                    <view class="box2 f fd-c ai-c">
                        <image src="http://cwht.ricecs.cn/app/shop/qq.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">QQ好友</view>
                    </view> -->
                    <view class="box2 f fd-c ai-c" @click="keepTap">
                        <image src="http://cwht.ricecs.cn/app/shop/keep.png" class="w-96 h-96 mb-16"></image>
                        <view class="fs-24 text-color3">保存图片</view>
                    </view>
                </view>
            </view>
            <view class="cancel w-f h-98 f ai-c jc-c fs-32 fw-600 text-color4" @click="showPost = false">取消</view>
        </view>
    </u-overlay>
</template>
<script setup lang="ts">
import Poster from '@/components/cc-poster/index.vue';
import { ref, toRefs } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
const props = defineProps({
    detail: {
        type: Object,
    },
	fid:{
		type:String
	}
});
const { detail,fid } = toRefs(props);
const show = ref(false);
const showPost = ref(false);
const tempFilePath = ref('');
const haibaoImg = ref(null);
const modalName = ref('');
const haibaoShow = ref(false);
const erweimapath = ref('https://www.xinhuanet.com/politics/2016-07/19/5119875106653616178_11n.jpg');
const goods = ref({
    itemid: '2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw',
    itemtitle: '产品名称',
    itemprice: '39.90',
    todaysale: '3',
    itempic: '',
    itemendprice: '29.91',
});
onShareAppMessage((res: any) => {
    if (res.from === 'button') {
        // 判断分享是否来自页面内分享按钮
        console.log(res.target);
    }
    return {
        title: detail.value.name,
        imageUrl: detail.value.picUrl,
        path: `/pages_shop/productDetails/index?id=${detail.value.id}&fid=${fid.value}`,
    };
});
const getShow = () => {
    show.value = true;
};
const posterSuccess = (data: any) => {
    tempFilePath.value = data.tempFilePath;
};
const keepTap = () => {
    uni.getImageInfo({
        src: tempFilePath.value,
        success: function (image) {
            uni.saveImageToPhotosAlbum({
                filePath: image.path,
                success: function () {
                    console.log('save success');
                    uni.showToast({
                        title: '海报已保存相册',
                        icon: 'success',
                        duration: 2000,
                    });
                },
            });
        },
    });
};
const generatePost = () => {
    show.value = false;
    showPost.value = true;
    console.log(detail.value)
    goods.value.itemtitle = detail.value.name;
    goods.value.itemprice = detail.value.bargainMinPrice;
    goods.value.itemendprice = detail.value.bargainMinPrice;
    goods.value.itempic = detail.value.picUrl[0];
    showModal();
};
function showModal() {
    if (!haibaoImg.value) {
        haibaoShow.value = true;

        uni.showLoading({
            title: '海报生成中...',
        });
    } else {
        modalName.value = 'Image';
    }
}

defineExpose({
    getShow: getShow,
});
</script>
<style lang="scss" scoped>
::v-deep button {
    padding: 0;
    margin: 0;
    background-color: #fff;
    line-height: 0;
    width: 20%;
    height: 154rpx;
}

.post {
    height: 100%;
}
.share {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    border-radius: 24rpx 24rpx 0 0;
    background: #fff;
    .cancel {
        border-top: 1px solid #f5f5f5;
    }
    .box2 {
        width: 25%;
    }
    .box {
        width: 20%;
    }
    .old-price {
        text-decoration: line-through;
    }
}
</style>
